<template>
  <div class="container">
    <div class="aside">
      <TreeMenu  :tree-data="treeData"/>
    </div>
    <div class="main">
      <div class="top">
        <div class="top-right">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-image style="width: 40px; height: 40px;border-radius: 50%" :src="getAvt"></el-image>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="getUser">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <div style="box-sizing: border-box;padding: 15px 15px 15px 15px;">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import loginApi from "@/api/login";
import userApi from "@/api/user";
import store from "@/store";
import TreeMenu from "./menus.vue";
export default {
  name: "layout",
  data() {
    return {
      isCollapse: false,
      treeData:[]
    };
  },
  computed: {
    getAvt() {
      return this.$store.getters.getUser.avt;
    }
  },
  components: {
    TreeMenu
  },
  created(){
      this.getUserMenu()
  },
  methods: {
    loginOut() {
      loginApi.getLoginOut().then(res => {
        this.$store.commit("SET_TOKEN", "");
        this.$router.replace("/");
      });
    },
    getUser() {
      this.$router.push("/umsg");
    },
    getUserMenu() {
      let id = store.state.user.userId;
      userApi.getUserMenu(id).then(res => {
        this.treeData = res.data.data.tree;
      });
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.aside {
  background: #545c64;
  height: 100%;
}
.main {
  max-width: calc(100% - 64px);
  min-width: calc(100% - 205px);
  height: 100%;
}
.top {
  width: 100%;
  height: 40px;
  padding: 5px 15px 0 0;
  box-sizing: border-box;
}
.top-right{
  float: right;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>